<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){

	$("div[name='field']").each(function(index){
		var value =  $("input[type='hidden']:eq("+ index +")").val();
		alert(value);
	});

	$(".content .index").each(function(index){
		$(this).text(index + 1 + " ");
	});
	
	$("#editArea input").keyup(function(){
		var index = $("#editArea input").index($(this));
		var value = $(this).val();
		$("div[name='field'] .option:eq("+ index +")").text(value);
		
	});
	
	$("span.close").click(function(){
		var index = $("#editArea .close").index(this);
		$(this).closest(".op_input").remove();
		$(".radioButtonList li:eq("+ index +")").remove();
	});
	

});
</script>
</head>
<body>
<div class="content">
	<div name="field" id="">
		<input type="hidden" value="002"/>
		<div class="head"> <span class="index"></span><span class="title">年龄</span> </div>
		<div class="part">
			<ul class="radioButtonList">
				<li class="radioButtonList-item">
					<label>
					<input type="radio" name="field-1" />
					<span class="option">第一选项</span>
					</label>
				</li>
				<li class="radioButtonList-item">
					<label>
					<input type="radio" name="field-1" />
					<span class="option">第二选项</span>
					</label>
				</li>
				<li class="radioButtonList-item">
					<label>
					<input type="radio" name="field-1" value="1"/>
					<span class="option">第三选项</span>
					</label>
				</li>
				<li class="radioButtonList-item">
					<label>
					<input type="radio" name="field-1"/>
					</label>
					<span class="option">其他</span>
					<input type="text" name="field-1" value="地方工业"/>
				</li>
			</ul>
		</div>
	</div>
	
	<div name="field">
		<div class="head"> <span class="index"></span><span class="title">年龄</span> </div>
		<div class="part">
			<input type="text"/>
		</div>
	</div>
	
	<div id="editArea">
		<div class="op_input">选项1 <input type="text"/><span class="close"> X </span></div>
		<div class="op_input">选项2 <input type="text"/><span class="close"> X </span></div>
		<div class="op_input">选项3 <input type="text"/><span class="close"> X </span></div>
	</div>
	
	
	<div id="field-2" name="field">
		<div class="head"><span class="index"></span><span class="title">性别</span></div>
		<div class="part">
			<ul class="radioButtonList">
				<li class="radioButtonList-item">
					<label>
					<input type="radio" name="field-2" id="field-2-1" value="1"/>
					男</label>
				</li>
				<li class="radioButtonList-item">
					<label>
					<input type="radio" name="field-2" id="field-2-2"  value="2" />
					女</label>
				</li>
			</ul>
		</div>
	</div>
</div>
<div id="area"></div>
<button id="btn" value="显示"/>
</body>
</html>
